<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-star-off"></i>班级男女比</span></div>
          <!--放图表控件 -->
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="studentBarChart" :style="{height:'420px',width:'300px'}" />
          </div>
        </el-card>
      </el-col>
<!--
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-star-off"></i>折线图</span></div>
          &lt;!&ndash;放图表控件 &ndash;&gt;
          <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">
            <div ref="LineChartTest" style="height:420px" />
          </div>
        </el-card>
      </el-col>-->
    </el-row>

  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
//import resize from './mixins/resize'
import {getStudentBarChartData} from "@/api/system/student";

const animationDuration = 1000

export default {

  data() {
    return {
      //柱状图
      studentBarChart:null,
      //折线图
      LineChartTest:null,
      //柱状图信息
      studentBarChartData: []
    }
  },
  /*mounted() {
    this.$nextTick(() => { //这个函数作用使得dom元素生成后再操作节点
      this.getChartList()
    })
  },*/
   created() {
      this.getChartList();
    },
  methods:{
    /**获取数据生成柱状图 **/
    getChartList(){
      getStudentBarChartData().then(response =>{
        this.studentBarChartData = response.data;
        this.studentBarChart = echarts.init(this.$refs.studentBarChart,"macarons");
        this.studentBarChart.setOption({
          title:{
            text:"班级男女分布图"
          },
          colorBy:'data', //根据数据项每条柱子颜色不一样 还有一种策略是根据series去区分
          legend:{
            data: response.data.xList
          },
          /** 提示框组件**/
          tooltip:{
            trigger:'axis',
            axiosPointer:{// 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {   //grid是直角坐标系内的网格
            top: 10,     //离容器上侧距离
            left: '2%',//
            right: '2%',
            bottom: '3%',//离下侧距离
            containLabel: true
          },
          xAxis:[{
            type:'category',
            data:response.data.xList, //类目数
            axisTick:{
              alignWithLabel:true //坐标轴刻度设置
            }
          }],
          yAxis:[{
            type: 'value',
            axisTick:{
              show :false
            }
          }],
          //最关键的数据部分
          series:[{
            name: 'amount' , //图例名称 回显到tooltip中
            type: 'bar',
            barWidth :'60%', //自适应宽度
            //这里是特别的 因为x轴指定了离散数据 所以此处本应当二维数组可简化为一维，填充y轴
            data: response.data.yList,
            animationDuration
          }]
        });
      });

    }
  }
}
</script>

